<?xml version="1.0" encoding="ISO-8859-2"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2"/>
            <title><h:outputText value="#{ind.title}"/></title>
            <link rel="stylesheet" type="text/css" href="style/main.css"/>
    </h:head>
    <h:body>
        <div id="header"><h1 id="title"><h:outputText value="#{ind.heading}"/></h1></div>
        <ui:include src="WEB-INF/util/menu.xhtml" />
        <p>Edit/remove category</p>

        <center>
        <h:form id="form">
            <rich:dataTable value="#{catList.allItems}" var="cat"
                iterationStatusVar="it" id="table" rows="10">
                <rich:column>
                    <f:facet name="header">#</f:facet>
                        #{it.index}
                    </rich:column>
                <rich:column>
                    <f:facet name="header">id</f:facet>
                    <h:outputText value="#{cat.id}" />
                </rich:column>
                <rich:column>
                    <f:facet name="header">name</f:facet>
                    <h:outputText value="#{cat.name}" />
                </rich:column>
                <rich:column>
                    <f:facet name="header">parent category id</f:facet>
                    <h:outputText value="#{cat.masterId}" />
                </rich:column>
                <rich:column>
                    <a4j:commandLink styleClass="no-decor" execute="@this"
                        render="@none" oncomplete="#{rich:component('confirmPane')}.show()">
                        <h:graphicImage value="/images/icons/delete.gif" alt="delete" />
                        <a4j:param value="#{it.index}"
                            assignTo="#{catList.currentCategoryIndex}" />
                    </a4j:commandLink>
                    <a4j:commandLink styleClass="no-decor" render="editGrid"
                        execute="@this" oncomplete="#{rich:component('editPane')}.show()">
                        <h:graphicImage value="/images/icons/edit.gif" alt="edit"/>
                        <a4j:param value="#{it.index}"
                            assignTo="#{catList.currentCategoryIndex}" />
                        <f:setPropertyActionListener target="#{catList.editedCategory}"
                            value="#{cat}" />
                    </a4j:commandLink>
                </rich:column>
                <f:facet name="footer">
                    <rich:dataScroller page="#{catList.page}" />
                </f:facet>
            </rich:dataTable>
            

            <a4j:jsFunction name="remove" action="#{catList.remove}"
                render="table" execute="@this"
                oncomplete="#{rich:component('confirmPane')}.hide();" />

            <rich:popupPanel id="confirmPane" autosized="true">
                Are you sure you want to delete the row?
                <a4j:commandButton value="Cancel"
                    onclick="#{rich:component('confirmPane')}.hide(); return false;" />
                <a4j:commandButton value="Delete" onclick="remove(); return false;" />
            </rich:popupPanel>

            <rich:popupPanel header="Edit Category" id="editPane" domElementAttachment="parent" width="400" height="170">
                <h:panelGrid columns="3" id="editGrid">
                    <h:outputText value="id" />
                    <h:outputText value="#{catList.editedCategory.id}" />
                    <h:panelGroup />

                    <h:outputText value="Name" />
                    <h:inputText value="#{catList.editedCategory.name}" required="true"/>
                    <h:panelGroup />

                    <h:outputText value="Parent category id" />
                    <h:inputText id="parentCatId" value="#{catList.editedCategory.masterId}"
                                 validator="#{parentCategoryValidator.validate}"/>
                    <h:panelGroup />
                    <h:message for="parentCatId" errorClass="errors"/>
                </h:panelGrid>
                <a4j:commandButton value="Modify" action="#{catList.store}"
                    render="table" execute="editPane"
                    oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('editPane')}.hide();}" />
                <a4j:commandButton value="Cancel"
                    onclick="#{rich:component('editPane')}.hide(); return false;" />
                
            </rich:popupPanel>
        </h:form>
        </center>

        <ui:include src="WEB-INF/util/footer.xhtml" />
    </h:body>
</html>
